<template>
	<view class="editor_content">
		<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
		<Editor :style="'height:'+ height +'px; overflow-y: hidden;' " v-model="value" :defaultConfig="{
        placeholder: placeholder,
        MENU_CONF: {
          uploadImage: {
            customBrowseAndUpload: omimage
          },
          uploadVideo: {
            customBrowseAndUpload: onvideo
          }
        }
      }" :mode="mode" @onCreated="handleCreated" @onChange="handleChange" />
		<uni-popup ref="alertDialog_image" type="dialog">
			<uni-popup-image imgList="0" count="1" :t_type="t_type" :t_name="t_name" @confirm="confirm">
			</uni-popup-image>
		</uni-popup>
	</view>
</template>
<script>
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue';

	export default {
		components: {
			Editor,
			Toolbar
		},
		props: {
			content: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'default'
			},
			toolbarConfig: {
				type: Object,
				default: () => ({})
			},
			placeholder: {
				type: String,
				default: ''
			},
			height: {
				type: Number,
				default: 500
			}
		},
		model: {
			prop: 'content',
			event: 'update:content'
		},
		data() {
			return {
				editor: null,
				toolbar: null,
				value: '',
				t_name: '',
				t_type: '',
			};
		},
		created() {
			this.value = this.content;
		},
		beforeDestroy() {
			if (this.editor) {
				this.editor.destroy();
			}
		},
		methods: {
			handleCreated(editor) {
				// 记录 editor 实例，重要！
				this.editor = Object.seal(editor);
			},
			handleChange(editor) {
				const html = editor.getHtml();  
				this.$emit('change', html); 
			},
			confirm(val, img_url) {
				this.insertFn(img_url + val[0]['attachment'], val[0]['filename'], img_url + val[0]['attachment']);
			},
			// 图片上传
			omimage(insertFn) {
				this.t_name = '图片';
				this.t_type = 'images';
				this.$refs.alertDialog_image.open()
				this.insertFn = insertFn;
			},
			//视频上传
			onvideo(insertFn) {
				this.t_name = '视频';
				this.t_type = 'video';
				this.$refs.alertDialog_image.open()
				this.insertFn = insertFn;
			},

		}
	};
</script>
<style lang="scss" scoped>
	.editor_content {
		border: 1px solid #ccc;
		z-index: 100;

	}

	.toolbar-container {
		border-bottom: 1px solid #ccc;
	}

	.editor-container {
		height: 500px;
	}

	.w-e-full-screen-container {
		z-index: 999 !important;
	}
</style>